<template>
    <cfDialog class="importDialog" :dialogObj='dialogObj'>
      <div slot='content' v-loading="loading">
        <template v-if="currentStep == 1">
          <el-upload
            action
            ref="upload"
            :limit="dialogObj.uploadObj.limit"
            :accept="dialogObj.uploadObj.accept"
            :show-file-list="false"
            :before-upload="beforeUpload"
          >
            <div class="upload-box">
              <span v-if="!file" class="el-icon-plus"></span>
              <span v-else style="color: #999;">暂不支持预览</span>
            </div>
          </el-upload>
          <div class="upload-tips">
            请先选择<span class="link-span" @click="handleDownLoad">【导入模板】</span> 后再进行数据导入
            <div v-if="fileName" class="upload-file">
              <span><svg-icon :icon-class="setFileIcon(fileName)" class="right12"></svg-icon>{{ fileName }}</span>
              <span class="el-icon-delete" @click="handleDelete"></span>
            </div>
          </div>
        </template>
        <div class="import_result" v-else>
          <div class="import_result_title"><i class="el-icon-circle-close delete-span"></i> 导入失败</div>
          <span v-html="errorMsg"></span>
        </div>
      </div>
      <template slot='footer'>
        <el-button type='primary' v-if="file && !loading && currentStep == 1" size='small' @click='handleConfirm'>导入</el-button>
        <el-button type='primary' v-if="currentStep == 2" size='small' @click='handleBack'>返回</el-button>
      </template>
    </cfDialog>
  </template>
  <script>
  export default {
    props: {
      dialogObj: {
        type: Object,
        default: ({
          visible: false,
          type: '',
          id: '',
          title: '',
          width: '520px',
          uploadObj: {
            accept: '.xls, .xlsx',
            limit: 1,
            size: 10*1024*1024,
            downloadFn: '',
            importFn: '',
          }
        })
      }
    },
    data() {
      return {
        loading: false,
        file: null,
        fileName: null,
        currentStep: 1,
        errorMsg: ''
      }
    },
    methods: {
      /**导入按钮事件 */
      beforeUpload(file) {
        this.beforeUploadFn(file, this.dialogObj.uploadObj, async (file)=>{
          this.file = file;
          this.fileName = file.name;
        });
        return false;
      },
      /**继续导入 */
      handleBack() {
        this.currentStep = 1;
        this.errorMsg = '';
        this.file = '';
        this.fileName = '';
        this.dialogObj.width = '638px';
        this.dialogObj.title = '导入';
      },
      /**删除附件 */
      handleDelete() {
        this.file = '';
        this.fileName = '';
      },
      async handleConfirm() {
        this.loading = true;
        const formData = new FormData();
        formData.append('file', this.file);
        const res = await this.dialogObj.uploadObj.importFn(formData);
        if(res.code == 200) {
          this.$message.success('导入成功');
          this.dialogObj.visible = false;
          this.$emit('refresh');
        } else if(res.code == 211) {
          this.currentStep = 2;
          this.errorMsg = res.msg;
          this.dialogObj.width = '438px';
          this.dialogObj.title = '导入结果';
        }
        setTimeout(() => {
          this.loading = false;
        }, 500);
      },
      /**模板下载 */
      async handleDownLoad() {
        this.loading = true;
        const res = await this.dialogObj.uploadObj.downloadFn();
        if(res.data && res.status == 200) {
          this.downloadFilesFn(res);
        }
        setTimeout(() => {
          this.loading = false;
        }, 500);
      }
    }
  }
</script>
  
<style lang="scss">
.importDialog {
  .dialog-content {
    text-align: center;
    .el-upload {
      width: 100%;
      max-width: 500px;
      .upload-box {
        width: 100%;
        height: 160px;
        line-height: 160px;
        margin: 0 auto;
        border: 1px dashed #999;
        border-radius: 6px;
        .el-icon-plus {
          font-size: 24px;
          cursor: pointer;
        }
      }
    }
    .upload-tips {
      margin-top: 24px;
      margin-bottom: 24px;
      text-align: center;
      .link-span {
        cursor: pointer;
      }
    }
    .upload-file {
      display: flex;
      justify-content: space-between;
      padding-top: 12px;
      .el-icon-delete {
        color: red;
        font-size: 14px;
        cursor: pointer;
      }
    }
    .import_result {
      line-height: 28px;
      padding: 0 0 0 24px;
      .import_result_title {
        font-size: 14px;
        font-weight: 500;
      }
    }
  }
}
</style>